<template>
    <main>
        <div class="img">
            <div class="logo"></div>
            <div class="enter">
                <router-link :to="'/'">
                    <font-awesome-icon icon="times" class="icon"/>
                </router-link>
            </div>
        </div>
        <div class="uid">
            <label for="tel_id">手机号</label><input type="tel" maxlength="11" placeholder="请输入手机号" id='tel_id' required>
        </div>
        <div class="uid">
            <label for="marss_id">验证码</label><input type="tel" maxlength="6" placeholder="请输入手机号" id='marss_id' required>
            <button type="button" class="btm">获取验证码</button>
        </div>
        <div class="login">
            <a href="javascript:;" class="login_a">手机号注册登录</a>
            <p class="login_log">
                <i><font-awesome-icon icon="check" class="login_check"/></i>
                <span class="span">同意</span>
                <a href="javascript:;">《唯品会服务条款》</a>
                <span>、</span>
                <a href="javascript:;">《隐私条款》</a>
                <span>、</span>
                <a href="javascript:;">《唯品支付用户服务协议》</a>
            </p>
        </div>
        <footer>
            <div class="footer_1"></div>
            <div class="footer_2">
                <div>
                    或
                    <span class="span1"></span>
                    <span class="span2"></span>
                </div>
                <router-link :to="'/'">
                    密码登录
                </router-link>
            </div>
        </footer>
    </main>
</template>
<style scoped>
    .img{
        position: relative;
        background-image: url('../assets/images/login/login.jpg');
        background-size:100% 100%;
        width: 100vw;
        height: 47.222vw;
    }
    .logo{
        position: absolute;
        width: 34.722vw;
        height: 13.889vw;
        background-image: url('../assets/images/login/logo.ac5608f4.png');
        background-size:100% 100%;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }
    .enter{
        position: absolute;
        right: 2vw;
        top: 2vw;
        width: 8vw;
        height: 8vw;
    }
    .icon{
        position: absolute;
        color:grey;
        width: 8vw;
        height: 8vw;
    }
    label{
        font-size: 5vw;
        margin-right: 5vw;
    }
    input{
        height: 15vw;
        font-size: 5vw;
        border: 0;
        outline:0; 
    }
    input::-webkit-input-placeholder{
        color: #e3e3e3;
    }
    input:-moz-placeholder{
        color: #e3e3e3; 
    } 
    input::-moz-placeholder{
        color: #e3e3e3;
    } 
    input:-ms-input-placeholder{
        color: #e3e3e3;
    }
    .uid{
        position: relative;
        padding-left: 5vw;
    }
    .uid::after{
        content: "";
        display: block;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        border-bottom: 1px solid  #e3e3e3;
    }
    .btm{
        display: inline-block;
        position: absolute;
        right: 0;
        height: 100%;
        padding: 0 5vw;
        border: 0;
        background-color: #fff;
        color: #a1a1a8;
        font-size: 5vw;
    }
    .btm::after{
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        border-left: 1px solid  #e3e3e3;
    }
    .login{
        position: relative;
        padding: 8vw 5vw 0 5vw;
    }
    .login_a{
        display: inline-block;
        color: #fff;
        background-color: #de3d96;
        height: 12vw;
        width: 100%;
        font-size: 5vw;
        text-align: center;
        line-height: 12vw;
        border-radius: 12vw;
    }
    .login_log{
        padding: 4vw 0 0 7vw;
        position: relative;
    }
    .login_log>i{
        position:absolute;
        left: 0;
        top: 4vw;
    }
    .login_check{
        position:relative;
        width: 6vw;
        height: 6vw;
        color: #78d071;
        border: 1.5px solid #78d071;
        border-radius: 2px;
        padding: 2px;
    }
    .login_log>a{
        font-size: 3.5vw;
        color: #3d94fb;
    }
    .span{
        display: inline-block;
        color: #98989f;
        font-size: 3.5vw;
        padding-bottom:1.5vw
    }
    .footer_1{
        height: 15vw;
        padding-right: 5vw;
    }
    .footer_2{
        position: relative;
        text-align: center;
    }
    .footer_2>div{
        line-height: 3.5vw;
        font-size:3.5vw;
        width: 8vw;
        text-align: center;
        color: #e3e3e3;
        margin: 0 auto;
    }
    .span1{
        display: block;
        position: absolute;
        top: 1.75vw;
        left: 0;
        width: 46vw;
        border-top: 1px solid #e3e3e3;
    }
    .span2{
        display: block;
        position: absolute;
        top: 1.75vw;
        right: 0;
        width: 46vw;
        border-top: 1px solid #e3e3e3;
    }
    .footer_2 a{
        display: inline-block;
        border: 1px solid #de3d96;
        color: #de3d96;
        font-size: 5vw;
        height: 12vw;
        line-height: 11vw;
        padding: 0 5vw;
        border-radius: 11vw;
        margin: 5vw 0;
    }
</style>